<template>
  <!--忘带卡排名-->
  <div class="contentRight">
    <!--自定义加载中-->
    <div class="zhezhaoContentRight" v-if="loadingTableContainer" style="top: 55px">
      <a-spin tip="加载中..." style="position: fixed;top: 50%;">
      </a-spin>
    </div>
    <div id="tools">
      <div class="height8"></div>
      <!-- 查询条件 -->
      <a-form layout="inline" style="text-align: left;padding: 0 10px;" :selfUpdate="true">
        <a-form-item label="开始日期" class="marginBtm">
          <a-date-picker
            :disabledDate="disabledStartDate"
            v-model="startDate"
            placeholder="开始日期"
            style="width: 140px"
          />
        </a-form-item>
        <a-form-item label="结束日期" class="marginBtm">
          <a-date-picker
            :disabledDate="disabledEndDate"
            placeholder="结束日期"
            v-model="endDate"
            :open="endOpen"
            @openChange="handleEndOpenChange"
            style="width: 140px"
          />
        </a-form-item>
        <!--<a-form-item label="次数" class="marginBtm">-->
          <!--<a-dropdown class="min-width-110">-->
            <!--<a-menu slot="overlay" @click="frequencyChange">-->
              <!--<a-menu-item :key="item.number" v-for="item in frequencyList">{{item.number}}</a-menu-item>-->
            <!--</a-menu>-->
            <!--<a-button>-->
              <!--<div class="query-conditions">-->
                <!--{{ frequencyNumber }}-->
                <!--<a-icon type="down"/>-->
              <!--</div>-->
            <!--</a-button>-->
          <!--</a-dropdown>-->
        <!--</a-form-item>-->

        <!--<a-form-item label="次数" class="marginBtm">-->
          <!--<a-select-->
            <!--showArrow-->
            <!--show-search-->
            <!--class="min-width-110"-->
            <!--placeholder="请输入忘带卡次数"-->
            <!--:default-value="2"-->
            <!--v-model="frequencyNumber"-->
            <!--@change="handleChange"-->
          <!--&gt;-->
            <!--<a-select-option v-for="key in frequencyList" :key="key">-->
              <!--{{key}}-->
            <!--</a-select-option>-->
          <!--</a-select>-->
        <!--</a-form-item>-->

        <a-form-item label="次数" class="marginBtm">
          <a-input-number
            v-model="frequencyNumber"
            :min="1"
            :default-value="2"
            :formatter="numberRep "
            :parser="numberRep "
            placeholder="请输入忘带卡次数"
            style="width: 160px"
          />
        </a-form-item>

        <a-form-item class="marginBtm">
          <a-button type="primary" @click="inquireAll">
            查询
          </a-button>
        </a-form-item>
      </a-form>
      <a-divider style="margin: 5px 0 0 0"/>
    </div>

    <div :style="tableContainer">

      <div class="zhezhaoContentRight" v-if="allMessageNull != ''">
        <div style="position: fixed;top: 50%;">
          {{allMessageNull}}
        </div>
      </div>

      <a-row :gutter="[10,10]" style="margin: 0 !important;">
        <a-col class="gutter-row" :span="antingSpan" v-show="antingShow">
          <div class="gutter-box whiteColor">
            <a-card size="small"  title="安亭基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <!--<template slot="extra">-->
                <!--<a-dropdown>-->
                  <!--<a  class="ant-dropdown-link menuA">-->
                    <!--{{antingAreaName}}-->
                    <!--<a-icon type="down" />-->
                  <!--</a>-->
                  <!--<a-menu slot="overlay" @click="handleClickAnting">-->
                    <!--<a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">-->
                      <!--{{item.areaName}}-->
                    <!--</a-menu-item>-->
                  <!--</a-menu>-->
                <!--</a-dropdown>-->
              <!--</template>-->
              <template slot="extra"><span style="color: transparent">全部</span></template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="antingTableData"
                :loading="loadingAnting"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="yinchuanSpan" v-show="yinchuanShow">
          <div class="gutter-box whiteColor">
            <a-card size="small" title="银川基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <!--<template slot="extra">-->
                <!--<a-dropdown>-->
                  <!--<a  class="ant-dropdown-link menuA">-->
                    <!--{{yinchuanAreaName}}-->
                    <!--<a-icon type="down" />-->
                  <!--</a>-->
                  <!--<a-menu slot="overlay" @click="handleClickYinchuan">-->
                    <!--<a-menu-item class="menuA" v-for="item in yinchuanAreaList" :key="item.id" :value="item.areaName">-->
                      <!--{{item.areaName}}-->
                    <!--</a-menu-item>-->
                  <!--</a-menu>-->
                <!--</a-dropdown>-->
              <!--</template>-->
              <template slot="extra"><span style="color: transparent">全部</span></template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="yinchuanTableData"
                :loading="loadingYinchuan"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="taicangSpan"  v-show="taicangShow">
          <div class="gutter-box whiteColor">
            <a-card size="small" title="太仓基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <template slot="extra">
                <a-dropdown>
                  <a  class="ant-dropdown-link menuA">
                    {{taicangAreaName}}<a-icon type="down" />
                  </a>
                  <a-menu slot="overlay" @click="handleClickTaicang">
                    <a-menu-item class="menuA" v-for="item in taicangAreaList" :key="item.id" :value="item.areaName">
                      {{item.areaName}}
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="taicangTableData"
                :loading="loadingTaicang"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="xiangtanSpan"  v-show="xiangtanShow">
          <div class="gutter-box whiteColor">
            <a-card size="small" title="湘潭基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <!--<template slot="extra">-->
                <!--<a-dropdown>-->
                  <!--<a  class="ant-dropdown-link menuA">-->
                    <!--{{xiangtanAreaName}}-->
                    <!--<a-icon type="down" />-->
                  <!--</a>-->
                  <!--<a-menu slot="overlay" @click="handleClickXiangtan">-->
                    <!--<a-menu-item class="menuA" v-for="item in xiangtanAreaList" :key="item.id" :value="item.areaName">-->
                      <!--{{item.areaName}}-->
                    <!--</a-menu-item>-->
                  <!--</a-menu>-->
                <!--</a-dropdown>-->
              <!--</template>-->
              <template slot="extra"><span style="color: transparent">全部</span></template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="xiangtanTableData"
                :loading="loadingXiangtan"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="nanjingSpan"  v-show="nanjingShow">
          <div class="gutter-box whiteColor">
            <a-card size="small" title="南京基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <!--<template slot="extra">-->
              <!--<a-dropdown>-->
              <!--<a  class="ant-dropdown-link menuA">-->
              <!--{{nanjingAreaName}}-->
              <!--<a-icon type="down" />-->
              <!--</a>-->
              <!--<a-menu slot="overlay" @click="handleClickNanjing">-->
              <!--<a-menu-item class="menuA" v-for="item in nanjingAreaList" :key="item.id" :value="item.areaName">-->
              <!--{{item.areaName}}-->
              <!--</a-menu-item>-->
              <!--</a-menu>-->
              <!--</a-dropdown>-->
              <!--</template>-->
              <template slot="extra"><span style="color: transparent">全部</span></template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="nanjingTableData"
                :loading="loadingNanjing"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="suzhouSpan"  v-show="suzhouShow">
          <div class="gutter-box whiteColor">
            <a-card size="small" title="苏州基地" :bodyStyle="{height:'330px',maxHeight:'330px'}">
              <!--<template slot="extra">-->
              <!--<a-dropdown>-->
              <!--<a  class="ant-dropdown-link menuA">-->
              <!--{{suzhouAreaName}}-->
              <!--<a-icon type="down" />-->
              <!--</a>-->
              <!--<a-menu slot="overlay" @click="handleClickSuzhou">-->
              <!--<a-menu-item class="menuA" v-for="item in suzhouAreaList" :key="item.id" :value="item.areaName">-->
              <!--{{item.areaName}}-->
              <!--</a-menu-item>-->
              <!--</a-menu>-->
              <!--</a-dropdown>-->
              <!--</template>-->
              <template slot="extra"><span style="color: transparent">全部</span></template>

              <a-table
                bordered
                :fixed="true"
                size="small"
                :columns="columns"
                :data-source="suzhouTableData"
                :loading="loadingSuzhou"
                :row-key="record => record.id"
                :scroll="{ x:300,y: 270 }"
                :locale="localezh_CN"
                :pagination="false"
              ></a-table>
            </a-card>
          </div>
        </a-col>

        <!--<a-col class="gutter-row" :span="xiangtanSpan" v-show="xiangtanShow">-->
          <!--<div class="gutter-box whiteColor">-->
            <!--<a-card size="small" title="湘潭基地">-->
              <!--<div class="areaNotOpened" style="height: 231px">-->
                <!--该区域暂未开通-->
              <!--</div>-->
            <!--</a-card>-->
          <!--</div>-->
        <!--</a-col>-->

      </a-row>
    </div>

  </div>
</template>

<script>
  import {tableBoxHeight} from "@/api/communal";
  import reservationApi from "@/api/reservation";
  import forgotCardManageApi from "@/api/forgotCardManage";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import {ConfigProvider} from 'ant-design-vue';//引用
  import moment from "moment";
  import 'moment/locale/zh-cn';

export default {
  components: {
    ConfigProvider
  },
  name: "",
  data () {
    return {
      localezh_CN,
      isshowall: true,
      loadingTableContainer: true,
      allMessageNull: "", //总数据查询失败
      tableContainer:{
        height:"",
        overflow:"auto",
        position: "relative"
      },
      startDate: "",
      endDate: "",
      endOpen: false,
      startDated: "",
      endDated: "",
      frequencyNumber: 2,
      frequencyList:[
        2
      ],

      // 安亭模块
      loadingAnting: false,
      antingTableData : [],
      aningAreaAll:[],
      antingAreaName:"全部",
      antingAreaId: "",
      antingSpan:12,
      antingShow:false,

      // 银川模块
      loadingYinchuan: false,
      yinchuanTableData : [],
      yinchuanAreaList:[],
      yinchuanAreaName:"全部",
      yinchuanAreaId: "",
      yinchuanSpan:12,
      yinchuanShow: false,

      // 太仓模块
      loadingTaicang: false,
      taicangTableData : [],
      taicangAreaList:[],
      taicangAreaName:"全部",
      taicangAreaId: "",
      taicangSpan:12,
      taicangShow: false,

      // 湘潭模块
      loadingXiangtan: false,
      xiangtanTableData : [],
      xiangtanAreaList:[],
      xiangtanAreaName:"全部",
      xiangtanAreaId: "",
      xiangtanSpan:12,
      xiangtanShow: false,

      // 南京模块
      loadingNanjing: false,
      nanjingTableData : [],
      nanjingAreaList:[],
      nanjingAreaName:"全部",
      nanjingAreaId: "",
      nanjingSpan:12,
      nanjingShow: false,

      // 苏州模块
      loadingSuzhou: false,
      suzhouTableData : [],
      suzhouAreaList:[],
      suzhouAreaName:"全部",
      suzhouAreaId: "",
      suzhouSpan:12,
      suzhouShow: false,

      columns: [],   //表格表头
    }
  },
  beforeMount() {
    this.columns = [
      {
        title: '序号',     //表头
        dataIndex: 'serialNumber',   //字段名称
        width: '50px',    //设列宽度
        align: 'center',  //居中显示
        fixed: "left",
        className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
        customRender: (value, row, index) => `${index + 1}`  //设置动态序号
      },
      {
        title: "工号",
        dataIndex: "userNo",
        align: "center",
        width: "100px",
        ellipsis: true,
        className: 'changeBack'
      },
      {
        title: "姓名",
        dataIndex: "userName",
        align: "center",
        width: "100px",
        ellipsis: true,
        className: 'changeBack'
      },
      {
        title: '忘带卡次数',
        dataIndex: 'forgotCardNum',
        width: '100px',
        align: 'center',
        ellipsis: true,
        className: 'changeBack'
      },
      {
        title: '',
        dataIndex: '',
        width: 'auto',
        align: 'center',
        className: 'changeBack'
      },
    ];
    // for (let i = 1; i < 10; i++) {
    //   this.antingTableData.push({
    //     id: i,
    //     personalNumber: (Math.random()*10000000).toString().substr(1,6),
    //     chineseName: `name${i}`,
    //     forgotTimes: (Math.random()*10000000).toString().substr(0,2)
    //   })
    // };
    this.startDate = moment().startOf('month');
    this.endDate = moment().endOf('month');
    this.startDated = moment(this.startDate).format('YYYY-MM-DD');
    this.endDated = moment(this.endDate).format('YYYY-MM-DD');
  },
  mounted(){
    let that = this;
    this.inquireAll();
    this.$nextTick(()=>{
      this.tableContainer.height = tableBoxHeight() + 100 + "px";
    });

  },
  methods: {
    // 根据权限获取各基地汇总数据--全部基地--第一次加载
    async inquireAll(){
      this.loadingTableContainer = true;
      let resp = await forgotCardManageApi.getForgotCardRankStatistical({
        baseId: 0,   //第一次全查传0
        areaId: 0,   //第一次全查传0
        type: 1,    //1 所有基地查询 2单独基地查询
        startDate: moment(this.startDate).format('YYYY-MM-DD'),
        endDate: moment(this.endDate).format('YYYY-MM-DD'),
        forgotCardNum: this.frequencyNumber
      });
      // console.log(resp.data);
      if (resp.data.success) {
        if (resp.data.result.isAnTingHaveAuthority == 1){
          this.antingTableData = resp.data.result.anTingStatisticalList;
          // if(this.aningAreaAll.length == 0){
          //   this.getAntingAreaList();
          // }
          this.antingShow = true;
        } else {
          this.antingTableData = [];
          this.antingShow = false;
        }

        if (resp.data.result.isTaiCangHaveAuthority == 1){
          this.taicangTableData = resp.data.result.taiCangStatisticalList;
          if(this.taicangAreaList.length == 0){
            this.getTaicangAreaList();
          }
          this.taicangShow = true;
        } else {
          this.taicangTableData = [];
          this.taicangShow = false;
        }

        if (resp.data.result.isYinChuanHaveAuthority == 1){
          this.yinchuanTableData = resp.data.result.yinChuanStatisticalList;
          // if(this.yinchuanAreaList.length == 0){
          //   this.getYinchuanAreaList();
          // }
          this.yinchuanShow = true;
        } else {
          this.yinchuanTableData = [];
          this.yinchuanShow = false;
        }

        if (resp.data.result.isXiangTanHaveAuthority == 1){
          this.xiangtanTableData = resp.data.result.xiangTanStatisticalList;
          // if(this.xiangtanAreaList.length == 0){
          //   this.getXiangtanAreaList();
          // }
          this.xiangtanShow = true;
        } else {
          this.xiangtanTableData = [];
          this.xiangtanShow = false;
        }

        if (resp.data.result.isNanJingHaveAuthority == 1){
          this.nanjingTableData = resp.data.result.nanJingStatisticalList;
          // if(this.xiangtanAreaList.length == 0){
          //   this.getXiangtanAreaList();
          // }
          this.nanjingShow = true;
        } else {
          this.nanjingTableData = [];
          this.nanjingShow = false;
        }

        if (resp.data.result.isSuZhouHaveAuthority == 1){
          this.suzhouTableData = resp.data.result.suZhouStatisticalList;
          // if(this.xiangtanAreaList.length == 0){
          //   this.getXiangtanAreaList();
          // }
          this.suzhouShow = true;
        } else {
          this.suzhouTableData = [];
          this.suzhouShow = false;
        }

        this.loadingTableContainer = false;

      } else {
        this.loadingTableContainer = false;
        this.allMessageNull = resp.data.message;
        // this.$message.error(resp.data.message);
      }
    },
    // 查询单个基地区域
    async getDataByArea(num,baseId,areaId) {
      // num 1安亭 2太仓 3银川 4湘潭 5南京 6苏州
      if (num == 1){
        this.loadingAnting = true;
      } else if (num == 2){
        this.loadingTaicang = true;
      } else if (num == 3){
        this.loadingYinchuan = true;
      } else if (num == 4){
        this.loadingXiangtan = true;
      } else if (num == 5){
        this.loadingNanjing = true;
      } else if (num == 6){
        this.loadingSuzhou = true;
      }
      let resp = await forgotCardManageApi.getForgotCardRankStatistical({
        searchDate: this.nowMonthDate,
        baseId: baseId,   //第一次全查传0
        areaId: areaId,   //第一次全查传0
        type: 2,    //1 所有基地查询 2单独基地查询
        startDate: moment(this.startDate).format('YYYY-MM-DD'),
        endDate: moment(this.endDate).format('YYYY-MM-DD'),
        forgotCardNum: this.frequencyNumber
      });
      // console.log(resp.data);
      if (resp.data.success) {
        if (num == 1){
          this.antingTableData = resp.data.result.statisticalList;
          this.loadingAnting = false;
        } else if (num == 2){
          this.taicangTableData = resp.data.result.statisticalList;
          this.loadingTaicang = false;
        } else if (num == 3){
          this.yinchuanTableData = resp.data.result.statisticalList;
          this.loadingYinchuan = false;
        } else if (num == 4){
          this.xiangtanTableData = resp.data.result.statisticalList;
          this.loadingXiangtan = false;
        } else if (num == 5){
          this.nanjingTableData = resp.data.result.statisticalList;
          this.loadingNanjing = false;
        } else if (num == 6){
          this.suzhouTableData = resp.data.result.statisticalList;
          this.loadingSuzhou = false;
        }

      } else {
        if (num == 1){
          this.antingTableData = [];
          this.loadingAnting = false;
        } else if (num == 2){
          this.taicangTableData = [];
          this.loadingTaicang = false;
        } else if (num == 3){
          this.yinchuanTableData = [];
          this.loadingYinchuan = false;
        } else if (num == 4){
          this.xiangtanTableData = [];
          this.loadingXiangtan = false;
        } else if (num == 5){
          this.nanjingTableData = [];
          this.loadingNanjing = false;
        } else if (num == 6){
          this.suzhouTableData = [];
          this.loadingSuzhou = false;
        }
        this.$message.error(resp.data.message);
      }
    },
    //日期控件需要的方法
    disabledStartDate(startDate) {
      const endDate = this.endDate;
      if (!startDate || !endDate) {
        return false;
      }
      return startDate.valueOf() > endDate.valueOf();
    },
    disabledEndDate(endDate) {
      const startDate = this.startDate;
      if (!endDate || !startDate) {
        return false;
      }
      return startDate.valueOf() >= endDate.valueOf();
    },
    handleStartOpenChange(open) {
      // if (!open) {
      //   this.endOpen = true;
      // }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    frequencyChange(e){
      // console.log(e);
      this.frequencyNumber = e.key;
    },

    // 安亭基地切换区域
    handleClickAnting(e) {
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      this.getDataByArea(1,100,e.key);
    },
    // 银川基地切换区域
    handleClickYinchuan(e) {
      this.yinchuanAreaName = e.item.value;
      this.yinchuanAreaId = e.key;
      this.getDataByArea(3,102,e.key);
    },
    // 太仓基地切换区域
    handleClickTaicang(e) {
      this.taicangAreaName = e.item.value;
      this.taicangAreaId = e.key;
      this.getDataByArea(2,20003,e.key);
    },
    // 湘潭基地切换区域
    handleClickXiangtan(e) {
      this.xiangtanAreaName = e.item.value;
      this.xiangtanAreaId = e.key;
      this.getDataByArea(4,20004,e.key);
    },
    // 南京基地切换区域
    handleClickNanjing(e) {
      this.nanjingAreaName = e.item.value;
      this.nanjingAreaId = e.key;
      this.getDataByArea(5,20005,e.key);
    },
    // 苏州基地切换区域
    handleClickSuzhou(e) {
      this.suzhouAreaName = e.item.value;
      this.suzhouAreaId = e.key;
      this.getDataByArea(6,20006,e.key);
    },

    // 获取安亭基地的区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      if (res.data.success){
        this.aningAreaAll = [{areaName: "全部", id: ""}];
        this.aningAreaAll = [...this.aningAreaAll,...res.data.result];
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取银川基地的区域
    async getYinchuanAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
      if (res.data.success){
        this.yinchuanAreaList = [{areaName: "全部", id: ""}];
        this.yinchuanAreaList = [...this.yinchuanAreaList,...res.data.result];
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取太仓基地的区域
    async getTaicangAreaList(){
      let res = await reservationApi.getBdVisitAreaListByRoleNew({typeId: 20003})
      if (res.data.success){
        this.taicangAreaList = [{areaName: "全部", id: ""}];
        this.taicangAreaList = [...this.taicangAreaList,...res.data.result];
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取湘潭基地的区域
    async getXiangtanAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 20004})
      if (res.data.success){
        this.xiangtanAreaList = [{areaName: "全部", id: ""}];
        this.xiangtanAreaList = [...this.xiangtanAreaList,...res.data.result];
      } else {
        this.$message.error(res.data.message);
      }
    },
    handleChange(value) {
      // console.log(`Selected: ${value}`);
    },
    numberRep(value){
      if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''
      } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
      } else {
        return ''
      }
    }





  }

}
</script>

<style scoped>

</style>
